<template>
  <main>
    <!-- <div>
      <h1>首页</h1>
      <div>
        <span>用户名：</span>
        <input type="text" v-model.trim="username" :placeholder="userPla">
      </div>
      <div>
        <span>密码：</span>
        <input type="text" v-model.trim="password" :placeholder="passPla">
      </div>
      <button @click="login">登录</button>
      <div>
        <span>数组push：</span>
        <p v-for="(item, index) in arr1" :key="index">{{ item }}</p>
        <button type="button" @click="pushData(num)">push</button>
      </div>
      <div>
        <span>对象添加属性：</span><button type="button" @click="pushObj">pushObj</button>
        <p v-for="item in object1">{{ item }}</p>
        <br>
        <button @click="replaceObj">替换Obj</button>
      </div>
      <div>
        <span>计算属性的使用：{{ author }}</span>
      </div>
      <br>
      <div>
        <h2>pinia的使用：</h2>
        <p>{{ useStore.count }}</p>
        <button @click="useStore.increment()">+1</button>
      </div>
      <dataList :msg="str" @abc="test" />
      <br>
      <button @click="navigator">跳转</button>
    </div> -->
    <!-- <div class="test">
      <h2>{{ $filters.sexName(1) }}</h2>
      <h2>{{ $filters.dateFormat(123877765634) }}</h2>
    </div> -->
  </main>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div>
        <img src="../assets/logo.png" alt="">
        <span>资料比鉴</span>
      </div>
      <div>
        <i class="iconfont icon-zhanghu"></i>
        <el-dropdown>
          <span class="el-dropdown-link pointer">
            {{ username }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <!-- 左侧导航菜单 -->
      <el-aside :width="toggleMenu ? '64px' : '200px'">
        <!-- <el-radio-group v-model="toggleMenu" style="margin-bottom: 20px">
          <el-radio-button :label="false">expand</el-radio-button>
          <el-radio-button :label="true">collapse</el-radio-button>
        </el-radio-group> -->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu :default-active="activePath" class="el-menu-vertical-demo" background-color="#333744" text-color="#fff"
          unique-opened :collapse="toggleMenu" :collapse-transition="false" @open="handleOpen" @close="handleClose">
          <el-sub-menu :index="'' + item.id" v-for="(item) in menuList" :key="item.id">
            <template #title>
              <i class="iconfont icon-zhongxiyijieheke"></i>
              <span>{{ item.menuName }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'' + item2.id" v-for="item2 in item.children" :key="item2.id"
                @click="toggleItem(item2)">
                <i class="iconfont icon-ic_juzhengdan"></i>
                <span>{{ item2.menuName }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 内容 -->
      <el-main>
        <!-- <dataList :msg="str" @abc="test" /> -->
        <main_content :activePath="activePath"></main_content>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
// import TheWelcome from '../components/TheWelcome.vue'
import dataList from "../components/dataList.vue";
import main_content from "../components/main_content.vue";
import { useCounterStore } from "@/stores/counter";
//引入路由
import { useRouter } from "vue-router";
let router = useRouter()
//引入 pinia 
const useStore = useCounterStore()
/**
 * 导入需要使用的API
 */
import {
  ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated,
  onBeforeUnmount, onUnmounted, reactive, computed, provide, watch, watchEffect
} from "vue";
//查看vue版本号
import { version } from 'vue'
console.log(version)

//provide 依赖   父组件提供值，后代组件使用inject可获得
provide('vueVersion', version)
//ref声明基本数据类型变量  js中的基本数据类型需要使用ref声明=====================================================================
const arr1 = ref([])
const num = ref(0)
const str = ref('父组件传入的值')
const isCollapse = ref(false)
const menuName = ref('')
const toggleMenu = ref(false)
const menuList = ref([
  {
    menuName: '证型/症状', id: 101, path: '', children: [
      { menuName: '证型', id: 102, path: '' },
      { menuName: '症状', id: 103, path: '' }
    ]
  },
  {
    menuName: '中病/西病', id: 201, path: '', children: [
      { menuName: '中病', id: 202, path: '' },
      { menuName: '西病', id: 203, path: '' }
    ]
  },
  {
    menuName: '成药/草药', id: 301, path: '', children: [
      { menuName: '成药', id: 302, path: '' },
      { menuName: '草药', id: 303, path: '' },
      { menuName: '方剂', id: 304, path: '' }
    ]
  }
])

const activePath = ref(null)
//
let path = window.sessionStorage.getItem('activePath')
if (!path) {
  activePath.value = '' + menuList.value[0].children[0].id
} else {
  activePath.value = path
}
//js中的引用数据类型，需要使用reactive声明   
//响应式对象
const object1 = reactive({})
//计算属性
const author = computed(() => {
  // console.log('arr1的长度：', arr1.value.length);
  return arr1.value.length % 2 == 0 ? 'YES' : 'NO'
})
const username = computed(() => {
  return localStorage.getItem('username')
})
//监听
watch(username, (newvalue, oldvalue) => {
  // console.log(newvalue, oldvalue);
})
//
watchEffect(() => {
  // console.log(`username值为:${username.value}`);
})
/**
 * 生命周期钩子 beforeCreate，created  无需声明，setup函数内自动执行，可直接使用
 */

//挂载之前 通常在这里进行一些数据准备、计算等操作。
onBeforeMount(() => {
  // console.log('onBeforeMount---3');
})

//挂载之后 通常在这里进行一些页面渲染、数据获取等操作。
onMounted(() => {
  // console.log('onMounted---4');
})

//更新之前 通常在这里进行数据验证、保存等操作。
onBeforeUpdate(() => {
  // console.log('onBeforeUpdate---5');
})

//更新之后 通常在这里进行一些数据更新后的操作，如重新渲染视图等。
onUpdated(() => {
  // console.log('onUpdated---6');
})

//实例销毁之前 通常在这里进行一些清理操作，如清除定时器、解绑事件等。
onBeforeUnmount(() => {
  // console.log('onBeforeUnmount---7');
})

//实例销毁之后 通常在这里进行一些资源释放等操作。
onUnmounted(() => {
  // console.log('onUnmounted---8');
})

/**
 * 业务逻辑处理  a =============================================================================================
 */
// 退出登录
function loginout() {
  // 清除sessionStorage中的登录状态
  window.sessionStorage.clear()
  // 跳转到登录页4
  router.push('/login')
}
//数组push
const pushData = () => {
  // console.log(arr1);
  num.value++
  arr1.value.push(num.value)
}
//object 添加属性 赋值
const pushObj = () => {
  object1.age = num.value
  object1.name = '张三' + num.value
  object1.city = '天津' + num.value

}
//整体替换obj
function replaceObj() {
  Object.assign(object1, { name: '李四', age: 20, city: '北京' })
}
//子组件触发
function test(value) {
  // console.log('子组件触发父组件函数', value);
}
//跳转页面
function navigator() {
  router.push('/about')
}
//折叠面板打开
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
//折叠面板关闭
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}
//侧边栏展示收起
function toggleCollapse(flag) {
  toggleMenu.value = !toggleMenu.value
}
/**
 * 
 * @param {*} item2 
 */
function toggleItem(item2) {
  menuName.value = item2.menuName
  //缓存菜单激活状态
  window.sessionStorage.setItem('activePath', '' + item2.id)
  activePath.value = '' + item2.id
}
</script>















<style lang="less" scoped>
.el-container {
  height: 100%;
}

.el-header {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #373D41;

  img {
    width: 50px;
    height: 50px;
  }

  div {
    display: flex;
    align-items: center;

    span {
      margin-left: 10px;
    }
  }
}

.pointer {
  cursor: pointer;
}

.el-aside {
  color: #fff;
  background-color: #333744;
}

.el-dropdown {
  color: #fff;
  font-size: 16px;
}

.el-main {
  background-color: #eaedf1;
}

.iconfont {
  margin-right: 5px;
}

.el-menu {
  border-right: 0px;
}

.toggle-button {
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  background: #4a5064;

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-submenu /deep/ .el-submenu__title {
  color: #fff !important;
}
</style>


